<!DOCTYPE html>
<style>
* {
    padding: 0;
    margin: 0;
}

::-webkit-scrollbar {
    display: none;
}

html, body {
    height: 400px;
    width: 400px;
    background: #eee;
    padding: 0;
    margin: 0;
}

div#child {
    position: absolute;
    top : 0;
    left: 400px;
    width: 400px;
    height: 10000px;
    background: #ddd;
}

</style>

<body onload="onLoad()">
    <div id='child'></div>
    <div id='console'></div>
</body>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script>
    const purpose =
    'Test that wheel and mouse events are dispatched to document ' +
    'and window even if they do not hit any element in the page.';

    window.receivers = new Map();
    const eventTypes = ['wheel', 'click', 'mousedown', 'mouseup'];
    const eventTargets = [window, document, document.body, document.getElementById('child')];

    function registerEvent(e) {
      window.receivers[e.type].push(this);
    }
    function registerEventHandlers(){
      for(var eventType of eventTypes) {
        window.receivers[eventType] = [];
        for(var target of eventTargets){
            target.addEventListener(eventType, registerEvent.bind(target));
        }
      }
    }
    function generateEventsAndVerify(x,y,expectedReceivers,title){
        promise_test(function(test){ return new Promise(async function(resolve, reject){
          await mouseDownAt(x,y);
          verifyReceivers('mousedown', expectedReceivers, test);

          await mouseUpAt(x,y);
          verifyReceivers('mouseup', expectedReceivers, test);
          verifyReceivers('click', expectedReceivers, test);

          const delta_x = 10;
          const delta_y = 10;
          const source = GestureSourceType.MOUSE_INPUT;
          const speed = SPEED_INSTANT;
          const precise_scrolling_deltas = false;
          await smoothScrollWithXY(delta_x, delta_y, x, y,
            source, speed, precise_scrolling_deltas);
          verifyReceivers('wheel', expectedReceivers, test);

          resolve();
        });}, title + ' ' + purpose);
    }
    function verifyReceivers(eventType, expectedReceivers, test) {
      window.actualReceivers = window.receivers[eventType];
      test.step(function(){
        assert_equals(objectsToString(actualReceivers), objectsToString(expectedReceivers), eventType);
      });
      window.receivers[eventType] = [];
    }
    function objectsToString(objects) {
      return String(objects.map(function(o) {return o.constructor.name;}));
    }

    function onLoad(){
      registerEventHandlers();
      // received by element, body, doc, window
      generateEventsAndVerify(500, 500, [document.getElementById('child'), document.body, document, window], 'outside body, inside element.');
      // received by body, doc, window
      generateEventsAndVerify(10, 10, [document.body, document, window], 'inside body, outside element.');
      // received by doc, window
      generateEventsAndVerify(10, 500, [document, window], 'outside body, outside element, inside frame.');
    }
</script>
